<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打印预览</title>
    <link rel="shortcut  icon" type="image/x-icon" href="ADMIN_IMG/admin_icon.ico" media="screen"/>
    <style>
        *{ padding: 0;margin:0; }
        body{ background: #e7e8eb; color: #333;font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif}
        .article_content{ max-width: 1000px;margin:30px auto 0 auto;}
        .article_content .head-title{ padding: 0 15px 10px 15px;border-bottom: 1px dashed #ccc;text-align: center;font-size: 30px;}
        .data-table{ margin: 20px 0 5px 0;border-style: solid;border-color:#333;border-width:1px 0 0 1px;border-radius: 0;width: 100%; }
        .data-table tr{ border: none;border-bottom: solid 1px #333;}
        .data-table th,.data-table td{padding: 6px;border: none;border-right: solid 1px #333;border-bottom: 1px solid #333;font-size: 16px;}
        .time{text-align: right;}
        .confirmPrintBtn{background: #0096ff;border: 1px solid #0096ff;color: #fff;padding: 6px 20px;font-weight: bold;font-size: 14px;vertical-align: middle;}
        .cancelPrintBtn{background: #999;border: 1px solid #999;color: white;padding: 6px 20px;font-weight: bold;font-size: 14px;vertical-align: middle;}
        .handlerA{width: 200px;height: 25px;line-height: 25px;overflow: hidden;color: #fff;background: #aaa;border: 1px solid #aaa;text-align: center;}
        .handlerB{width: 200px;margin: 0 auto;height: 120px;border: 1px solid #ccc;background:#ccc;}
        .printSuccessBtn {background: #0096ff;border: 1px solid #0096ff;color: #fff;padding: 4px 15px;font-weight: bold;font-size: 14px;vertical-align: middle;}
        .printFailBtn{background: #0096ff;border: 1px solid #0096ff;color: #fff;padding: 4px 18px;font-weight: bold;font-size: 14px;vertical-align: middle;}
    </style>
</head>
<body>
    <div class="article_content">
        <div class="head-title">
            {$ShopName}出库单
        </div>
        <table class="data-table" cellspacing="0" cellpadding="0">
            <colgroup>
                <col width="30%">
                <col width="15%">
                <col width="15%">
                <col width="15%">
                <col width="15%">
                <col width="10%">
            </colgroup>
            <tr>
                <th>商品名称</th>
                <th>规格</th>
                <th>出库量</th>
                <th>库存量</th>
                <th>商品编码</th>
                <th>订单号</th>
            </tr>
            {notempty name="list"}
                {foreach name="list" id="vo"}
                <tr>
                    <td>{$vo.goods_name}</td>
                    <td>{$vo.sku_name}</td>
                    <td align="center">{$vo.num}&nbsp;件</td>
                    {if condition="$vo['stock'] == '' "}
                    <td align="center">0&nbsp;件</td>
                    {else/}
                    <td align="center">{$vo.stock}&nbsp;件</td>
                    {/if}
                    <td>{$vo.code}</td>
                    <td>
                        {foreach name="$vo['order_list']" id="to"}
                            {$to.order_no}<br>
                        {/foreach}
                    </td>
                </tr>
                {/foreach}
            {/notempty}
        </table>
        <div class="time">
            出库时间：{$now_time|date="Y",###}年{$now_time|date="m",###}月{$now_time|date="d",###}日
        </div>
    </div>
    <div class="extraElement">
        <input id="expressIDs" value="1677,1676,1675" type="hidden">
         <input id="ShopName" value="1" type="hidden">
        <div id="popA" style="width: 202px; opacity: 0.8; position: absolute; top: 262px; left: 850.5px; cursor: move;">
       <!--      <div class="handlerA">
                <span>操作</span></div> -->
            <div class="handlerB">
                <table>
                    <tbody><tr style="height: 30px;line-height:30px;">
                        <td colspan="4" style="text-align:center;background:#999;color:#fff;">
                         操作
                        </td>
                    </tr>
                    <tr style="height: 40px;"></tr>
                    <tr>
                        <td style="width: 50px;">
                        </td>
                        <td>
                            <input class="confirmPrintBtn" value="打印" onclick="javascript: printIt();" id="print" style="cursor: pointer;" type="button">
                        </td>
                        <td>
                            <input class="cancelPrintBtn" onclick="javascript: printCancel();" value="取消" style="cursor: pointer;" type="button">
                        </td>
                        <td style="width: 50px;">
                        </td>
                    </tr>
                </tbody></table>
            </div>
        </div>
        <div id="popB" style="width: 202px; opacity: 0.9; display: none; position: absolute; top: 262px; left: 600px; cursor: move;">
            <div class="handlerA" style="width:202px;text-align:center;background: #999;height: 28px;line-height: 28px;">
                <span style="color: red;font-size: 14px;">反馈您的打印结果【非常重要】</span></div>
            <div class="handlerB">
                <table>
                    <tbody><tr style="height: 50px;">
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <!-- <td style="width: 60px;">
                        </td> -->
                        <td>
                            <input class="printSuccessBtn" value="打印成功" onclick="javascript: printSuccess();" style="cursor: pointer;" type="button">
                        </td>
                        <td>
                            <input class="printFailBtn" value="打印失败" onclick="javascript: printFail();" style="cursor: pointer;" type="button">
                        </td>
                     <!--    <td style="width: 60px;">
                        </td> -->
                    </tr>
                </tbody></table>
            </div>
        </div>
    </div>
    <script src="__STATIC__/js/jquery-1.8.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="ADMIN_JS/easydrag.js"></script>
    <script type="text/javascript">
    var expressArrayIDs = new Array();
    $(function () {
        var expressArrayIDs = $("#expressIDs").val()
        var ShopName = $("#ShopName").val()

        showDiv($("#popA"));
        showDiv($("#popB"));
        function showDiv(obj) {
            center(obj);
            $(window).scroll(function () {
                center(obj);
            });
            $(window).resize(function () {
                center(obj);
            });
        }
        
        function center(obj) {
            var windowWidth = document.documentElement.clientWidth;
            var windowHeight = document.documentElement.clientHeight;
            var popupHeight = $(obj).height();
            var popupWidth = $(obj).width();
            $(obj).css({
                "position": "absolute",
                "top": (windowHeight - popupHeight) / 2 + $(document).scrollTop() - 150,
                "left": (windowWidth - popupWidth) / 2
            });
        }
    })

    // 打印成功后【当用户确定打印成功后才会修改订单的打印状态】
    function printSuccess() {
        var isOk = false;
        // 打印完成后执行
        $.ajax({
            url: "{:__URL('ADMIN_MAIN/orderform/changeorderprintstate')}",
            data: { "orderIDs": JSON.stringify(expressArrayIDs) }, // 必须是json格式传到后台才会被AppHelper.JsonDeserialize解析
            async: false, // 让它同步执行
            type: "post",
            success: function (successdata) {
                if (successdata == "ok") {
                    isOk = true;
                }
            }
        });
        
        if (isOk = true) {
            window.close();
        }
    }

    // 打印失败
    function printFail() {
        $("#popA").css("display", "block");
        $("#popB").css("display", "none");
    };

    // 打印
    function printIt() {
    // 打印 【IE 和 google默认打印浏览器打印后才往下执行，firefox 会另开一个线程。但是都无法判断是否已打印】
        $("#popA").css("display", "none");
        window.print();
        setTimeout(function () {
            $("#popB").css("display", "block");
        }, 1000);
    }

    // 取消打印
    function printCancel() {
        window.close();
    }
    </script>
</body>
</html>